<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">-->
    <link type="text/css" rel="stylesheet" href="/patentQuery/css/login.css">
    <script type="text/javascript" src="/patentQuery/js/jquery.min.js"></script>
    <!--不方便操作，改用表单提交-->
    <!--<script type="text/javascript" src="/patentQuery/js/jquery.form.js"></script>-->
    <!--效果不好，想基于layer用Tips手动实现校验了-->
    <!--<script type="text/javascript" src="/patentQuery/js/jquery.validate.min.js"></script>-->
    <!--<script type="text/javascript" src="/patentQuery/js/messages_zh.js"></script>-->
</head>
<body class="login_bj" >

<div class="zhuce_body">
	<div class="logo"><a href="/patentQuery/index.html"><img src="images/logo.png" border="0"></a></div>
    <div class="zhuce_kong">
    	<div class="zc">
        	<div class="bj_bai">
            <h3>欢迎注册</h3>
       	  	  <form id="registerForm" action="" method="post">
                    <input id="telephone" name="telephone" type="text" class="kuang_txt phone" placeholder="手机号" required title="请输入手机号"
                           data-tip="请输入正确的手机号" pattern="^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$">
                <input id="email" name="email" type="email" class="kuang_txt email" placeholder="邮箱" required title="请输入邮箱"
                       data-tip="请输入正确的邮箱" pattern="^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$">
                <input name="password" type="password" class="kuang_txt password" placeholder="密码" required title="请输入密码"
                       data-tip="密码长度在6~18之间，只能包含字母、数字和下划线" pattern="^[a-zA-Z0-9_@]{6,18}$">
                <!--<input name="" type="text" class="kuang_txt possword" placeholder="邀请码">-->
                <div>
                    <input id="jcaptcha" name="jcaptcha" type="text" class="kuang_txt yanzm" placeholder="右侧验证码" required title="请输入验证码">
                    <div class="hui_kuang">
                        <!--点击图片即可刷新-->
                        <img id="captchaCode_img" src="/patentQuery/jcaptcha.jpg"
                             onclick="this.src='jcaptcha.jpg?d='+new Date()*1"
                             title="点击更换验证码"
                        style="margin: 0 10px;width: 80px;height: 31px;">
                    </div>
                	<!--<div class="shuaxin"><a href="#"><img src="images/zc_25.jpg" width="13" height="14"></a></div>-->
                </div>
                <div class="select_box">
                    <select id="verificationCodeTypeSelect" class="select_type" name="type">
                        <option value ="sms" selected>短信验证码</option>
                        <option value ="mail">邮箱验证码</option>
                    </select>
                    <input id="getCodeBtn" type="button" value="获取" class="btn_yanzm" disabled>
                </div>
                <div class="verification">
                    <input id="verificationCode" name="captcha" type="text" class="kuang_txt yanzm" placeholder="填写短信验证码" required title="请输入短信验证码">
                </div>
                <div>
                    <input id="agreeTermsBox" type="checkbox" value=""><span>已阅读并同意</span><a style="cursor: pointer" onclick="displayContract();"><span class="lan">《「知万千」服务条款》</span></a>
                </div>
                <input id="registerBtn" type="submit" class="btn_zhuce" value="注册" disabled>
                
                </form>
            </div>
        	<div class="bj_right">
            	<p>使用以下账号直接登录</p>
                <a href="/patentQuery/qqLogin" class="zhuce_qq">QQ登录</a>
                <!--<a href="#" class="zhuce_wb">微博注册</a>-->
                <!--<a href="#" class="zhuce_wx">微信注册</a>-->
                <p>已有账号？<a href="userLogin.html">立即登录</a></p>
            
            </div>
        </div>
    </div>

</div>
<script src="js/layer/layer.js"></script>
<!--基于layer，提示校验信息的插件-->
<script type="text/javascript" src="js/validation.js"></script>

<script>
// 弹出服务条款
function displayContract() {
    //iframe窗
    layer.open({
        type: 2,
        title: '《「知万千」服务条款》',
        shadeClose: true,
        shade: false,
        maxmin: true, //开启最大化最小化按钮
        area: ['893px', '600px'],
        content: 'contract20180501.html'
    });
}

// 跟登录不同，注册采取浏览器端验证的方式。
// 校验表单
var $registerForm = $('#registerForm');
$registerForm.validate();

// 输入了 jcaptha 才能获取短信/邮件验证码
var $getCodeBtn = $('#getCodeBtn');
var $jcaptcha = $('#jcaptcha');
$jcaptcha.on('change',function (e) {
    var value = $jcaptcha.val();
    if (value !== "") {
        $getCodeBtn.attr("disabled", false);
    } else {
        $getCodeBtn.attr("disabled", true);
    }
});

// 验证码类型选择
var $code = $('#verificationCode');
var $codeTypeSelect = $('#verificationCodeTypeSelect');
$codeTypeSelect.on('change',function () {
    // 文字替换
    var value = $(this).val();
    if (value === "sms") {
        $code.attr('placeholder','填写短信验证码');
        $code.attr('title','请输入短信验证码');
    } else if (value === "mail") {
        $code.attr('placeholder','填写邮件验证码');
        $code.attr('title','请输入邮件验证码');
    }
});

// 验证码获取
$getCodeBtn.click(function (e) {
    // 聚焦光标
    // $code.focus();
    // 禁用
    $getCodeBtn.attr("disabled", true);
    // 发送请求
    $.ajax({
        url:'/patentQuery/user/getVerificationCode',
        type:'post',
        dataType:'json',
        data: {
          type: $codeTypeSelect.val(),
          jcaptcha: $jcaptcha.val(),
          telephone: $('#telephone').val(),
          email: $('#email').val(),
        },
        success: function (returnData) {
            // 有好几个状态
            switch (returnData.messageCode) {
                case "302": // jcaptha 验证码 为空 302
                case "303": // jcaptha 验证码 错误要提示 303
                case "304": // jcaptha正确，但邮件发送失败，请更换验证方式
                case "305": // jcaptha正确，但短信发送失败，请更换验证方式
                    layer.tips(returnData.message, '#getCodeBtn', {
                        tips: 2 // 右边
                    });
                    // 更新验证码
                    $('#captchaCode_img').attr('src','jcaptcha.jpg?d='+new Date()*1);
                    break;
                default: // jcaptha正确后，发送验证码要倒计时...60s，并恢复按钮enable状态
                    var countdown=60;
                    var interval = setInterval(function () {
                        if (countdown === 0) {
                            $getCodeBtn.attr('disabled',false);
                            $getCodeBtn.val("重新获取");
                            clearInterval(interval);
                            // 更新验证码
                            $('#captchaCode_img').attr('src','jcaptcha.jpg?d='+new Date()*1);
                        } else {
                            $getCodeBtn.attr('disabled',true);
                            $getCodeBtn.val("重新发送(" + countdown + ")");
                            countdown--;
                        }
                    }, 1000);
            }
        }
    });
});

// 回车键触发注册事件
$(document).keyup(function(event){
    if(event.keyCode === 13){
        // 触发注册事件前，要同意服务条款
        // 并且填写了邮箱或手机的验证码
        if ($('#agreeTermsBox').prop('checked') && $code.val() !== "") {
            $registerForm.trigger("submit");
        }
    }
});

// 同意服务条款
$('#agreeTermsBox').click(function (e) {
    var $btn = $('#registerBtn');
    $btn.attr("disabled", !$btn.attr("disabled"));
});

// 注册
$registerForm.submit(function (e) {

    // 获取表单提交数据
    var data = $registerForm.serialize();

    $.ajax({
        url:'/patentQuery/user/register',
        type:'post',
        data: data,
        dataType: 'json',
        success:function(returnData) {
            // handleMessageCode(returnData);

            var messageCode = returnData.messageCode;
            // 注册失败
            switch (messageCode) {
                case "301": // 注册帐号信息不完整
                case "306": // 验证码错误
                    // 显示提示信息
                    layer.tips(returnData.message, '#registerBtn', {
                        tips: 2 // 右边
                    });
                    // 并更新验证码
                    $('#captchaCode_img').attr('src','jcaptcha.jpg?d='+new Date()*1);
                    break;
                case "001": // 注册成功
                    // TODO 注册成功，跳转信息完善页面
                    // 个人信息页面尚未编写，先到登录界面
                    location.href = "/patentQuery/userLogin.html";
                    break;
            }
        },
        error:function() {
            alert('系统异常，请稍后再试');
        }
    });

    return false;
});

// 原先使用的$form.ajaxSubmit(options);方式提交的
/*$('#registerBtn').click(function (e) {
    var $form = $('#registerForm');
    var data = $form.serialize();
    var options = {
        url:'/patentQuery/user/register',
        type:'post',
        success:function(returnData) {
            // handleMessageCode(returnData);

            var messageCode = returnData.messageCode;
            // 登录失败
            if (messageCode === "301") {

                layer.tips(returnData.message, '#registerBtn', {
                    tips: 2 // 右边
                });
            }
            // 注册成功
            else if (messageCode === "001") {
                // 注册成功，跳转信息完善页面
                // location.href = "/patentQuery";
            }
        },
        error:function() {
            alert('系统异常，登录失败');
        }
    };

    $form.ajaxSubmit(options);
    return false;
});    */
</script>

</body>
</html>